<template>
	<div class="main-header">
		<!-- Logo图标 -->
		<div class="logo">
			Teamwork
		</div>
		<!--	用户信息	-->
		<div class="topbar">
			<div class="user-info">
				<ul>
					<li>
						<el-badge value="12">
							<span class="el-icon-bell"></span>
						</el-badge>
					</li>
					<li>
						<el-badge value="6">
							<span class="el-icon-message"></span>
						</el-badge>
					</li>
					<li>
						<el-avatar v-if="src" :src="src"></el-avatar>
						<el-avatar v-else icon="el-icon-user-solid"></el-avatar>
						<span class="username">Administrator</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
// import Badge from "components/common/Badge";
export default {
	name: "MainHeader",
	components: {},
	data() {
		return {
			src: ""
		}
	}
}
</script>

<style scoped>
.main-header {
}

.main-header::after {
	clear: both;
	content: "";
	display: block;
}

.topbar {
	background-color: #3c8dbc;
	margin-left: 300px;
}

.topbar::after {
	content: "";
	display: block;
	clear: both;
}

.logo {
	width: 260px;
	height: 60px;
	padding: 0 20px;
	background-color: #367fa9;
	color: #fff;
	font-size: 1.6em;
	text-align: center;
	font-weight: bold;
	vertical-align: middle;
	line-height: 60px;
	overflow: hidden;
	float: left;
	position: relative;
	cursor: pointer;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.user-info {
	float: right;
	padding-right: 18px;
}

.user-info ul::after {
	display: block;
	content: "";
	clear: both;
}

.user-info ul > li {
	float: left;
	height: 60px;
	cursor: pointer;
	padding: 0 18px;
	display: flex;
	align-items: center;
	color: #ffffff;
}

.user-info ul > li:hover {
	background-color: #367fa9;
}

.user-info .username {
	margin-left: 6px;
	display: inline-block;
	width: 115px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
